<template>
    <ImgInfoCard :img="card.img" :title="'基本信息'" @onMore="goDetail(props.permi)" :list="card.infoList"></ImgInfoCard>
</template>

<script setup>
import ImgInfoCard from '@/DbComponents/imgInfoCard'
import { reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'
import dbPublicApi from '@/api/dbPublic'
import { toThousands } from '@/utils/number-util'

const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    },
    projectCode: {
        type: String,
        required: false,
        default: ''
    },
    templateCode: {
        type: String,
        required: false,
        default: ''
    }
})

const card = reactive(
    {
        img: '',
        infoList: [],
        // infoList: [{ label: '建筑面积', value: '', color: '' }],
    }
)

const getInfo = () => {
    dbPublicApi.queryProjectInformationPcApi({ biProjectCode: props.biProjectCode, projectCode: props.projectCode, resourceKey: props.permi, templateCode: props.templateCode }).then((res) => {
        if (res.data.code == 200) {
            card.img = res.data.data.pcImageUrl ? res.data.data.pcImageUrl : ''
            card.infoList = []
            res.data.data.dataList.map(item => {
                card.infoList.push({
                    label: item.key,
                    value: `${toThousands(item.value)}${item.unit == '-' ? "" : item.unit}`,
                    color: item.color
                })
            })
        }
    }).catch(err => {
        console.log(err)
    });
}

const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
}
getInfo()

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    getInfo()
}, { deep: true });
</script>

<style scoped lang="scss"></style>
